<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Star Admin Free Bootstrap Admin Dashboard Template</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../../static/vendors/iconfonts/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../../../static/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../../static/vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../../static/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="../../../static/images/favicon.png" />
</head>

<body>
    <div class="container-scroller">
        <div class="container-fluid page-body-wrapper full-page-wrapper auth-page">
            <div class="content-wrapper d-flex align-items-center auth register-bg-1 theme-one">
                <div class="row w-100">
                    <div class="col-lg-4 mx-auto">
                        <h2 class="text-center mb-4">添加商品</h2>
                        <div class="auto-form-wrapper">
                            <form id="treasure-form" action="#">
                                <div class="form-group">
                                    <label class="label">商品标题</label>
                                    <div class="input-group">
                                        <input name="title" type="text" class="form-control" placeholder="商品标题">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-check-circle-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                        <label class="label">商品描述</label>
                                    <div class="input-group">
                                        <input name="description" type="text" class="form-control" placeholder="商品描述">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-check-circle-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                        <label class="label">商品价格</label>
                                    <div class="input-group">
                                        <input name="price" type="number" class="form-control" placeholder="商品价格">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-check-circle-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                        <label class="label">商品库存</label>
                                    <div class="input-group">
                                        <input name="stock" type="number" class="form-control" placeholder="商品库存">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-check-circle-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="label">图片地址</label>
                                    <div class="input-group">
                                        <input name="imgUrl" type="text" class="form-control" placeholder="图片地址">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-check-circle-outline"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <button id="submit-btn" class="btn btn-primary submit-btn btn-block">提交</button>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- content-wrapper ends -->
        </div>
        <!-- page-body-wrapper ends -->
    </div>
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../../../static/vendors/js/vendor.bundle.base.js"></script>
    <script src="../../../static/vendors/js/vendor.bundle.addons.js"></script>
    <!-- endinject -->
    <!-- inject:js -->
    <script src="../../../static/js/off-canvas.js"></script>
    <script src="../../../static/js/misc.js"></script>
    <!-- endinject -->
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</body>
<script type="text/javascript">
    $(function () {

        var base = "http://localhost:8080"
        
        $("#submit-btn").click(function () {
           
            $("#treasure-form").validate({
                rules: {
                    title: "required",
                    description: "required",
                    price: {
                        required: true,
                        min: 0
                    },
                    stock: {
                        required: true,
                        min: 0
                    },
                    "img-url": "url"
                },
                messages: {
                    title: "商品标题不能为空",
                    description: "商品描述不能为空",
                    price: {
                        required: "价格必填",
                        min: "价格必须大于0"
                    },
                    stock: {
                        required: "库存必填",
                        min: "库存必须大于0"
                    },
                    "img-url": "请填入合法网址"
                },
                submitHandler: function (form) {

                    $.ajax({
                        url: base + "/treasure/creator",
                        data:form.serialize,
                        method: "POST",
                        xhrFields: {
                            withCredentials: true
                        }
                    }).done(function (data, status) {
                        /**
                         * 验证完毕后提交注册
                         */
                        if (data.status == "success") {
                            console.log("创建商品成功")

                        } else {
                            console.log("创建商品失败")
                            alert(data.data)
                        }
                    })
                }
            })

        });
    })
</script>

</html>